<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_address.mine }}</view>
				<view></view>
			</view>
		</view>

		<view>
			<mescroll-body height="calc(100vh - 298rpx - var(--status-bar-height))" ref="mescrollRef"
				@init="mescrollInit" @down="downCallback" @up="upCallback">
				<view>
					<view v-for="(item, index) in dataList" :key="index">
						<view class="flex-between" style="padding: 14rpx 40rpx 24rpx;" @click="changeAddress(item, type !== 'use')">
							<view class="u-f-28 u-lh-40">
								<view class="color-grew">{{ formatAddress(item) }}</view>
								<view v-if="item.address" class="u-m-t-2 u-f-30 u-lh-42 font-bold">
									{{ item.address || '' }}</view>
								<view class="flex u-m-t-14 color-grew">
									<view class="u-m-r-30">{{ item.name || '' }}</view>
									<view class="clear-flex">{{ hidePhone(item.mobile) }}</view>
								</view>
							</view>

							<image src="@/static/image/common/edit_black.png" style="width: 36rpx; height: 36rpx"
								class="clear-flex" @click.stop="changeAddress(item, 1)"></image>
						</view>

						<!-- 分割线 -->
						<u-gap height="1" bgColor="#DEDEDE"></u-gap>

						<view class="flex-center-between" style="padding: 0 40rpx; height: 108rpx;">
							<view class="flex-center color-grew" @click="changeDefault(item)">
								<view :class="[`color-${ item.isDefault ? 'red' : 'grew' }`]">
									<u-icon :name="`${ item.isDefault ? '' : 'un' }selected`" custom-prefix="u"
										active-color="#FF3A2F" size="32"></u-icon>
								</view>
								<view class="u-m-l-18">{{ lang_address.default }}</view>
							</view>

							<view v-if="type === 'save'" style="color: #666;" @click="beforeDelete(item)">{{ lang_common.delete }}</view>
						</view>

						<!-- 分割线 -->
						<u-gap height="10" bgColor="#F9F9F9"></u-gap>
					</view>
				</view>
			</mescroll-body>
		</view>

		<!-- 添加地址 -->
		<x-fixed-bottom>
			<view class="flex-center-center u-p-t-40 u-p-b-40">
				<x-common-btn @click="jumpUrl('/pages/user/address/save/save?type=add')">{{ lang_address.add }}
				</x-common-btn>
			</view>
		</x-fixed-bottom>

		<!-- 删除弹窗 -->
		<u-modal v-model="addressVisible" :show-title="false" :content="lang_address.deleteAddressTips"
			show-cancel-button :cancel-text="lang_common.cancel" :confirm-text="lang_common.done"
			:confirm-color="'#FD1E43'" @confirm="deleteAction" z-index="10203">
		</u-modal>
	</view>
</template>

<script>
	import {
		addressAddressList,
		addressDeleteAddress,
		addressSetDefaultAddress
	} from '@/api/user/address.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				addressVisible: false,
				addressId: '',

				type: 'save',
				event: null,

				dataList: []
			}
		},
		onLoad({
			type
		}) {
			if (type) {
				this.type = type
			}
			this.event = this.getOpenerEventChannel();
			this.event.on('address-select', (e) => {
				console.log(e)
			})
		},
		onShow() {
			this.downCallback()
		},
		methods: {
			// 格式化地址
			formatAddress({
				country,
				province,
				city
			}) {
				return (country || '') + (province || '') + (city || '')
			},
			// 隐藏号码
			hidePhone(mobile = '') {
				return mobile.slice(0, 3) + '****' + mobile.slice(-4)
			},
			// 地址删除前
			beforeDelete(item) {
				this.addressId = item.id
				this.addressVisible = true
			},
			changeDefault(item) {
				addressSetDefaultAddress({ addressId: item.id }).then(() => {
					this.downCallback()
				})
			},
			// 删除地址
			deleteAction() {
				addressDeleteAddress({
					addressId: this.addressId
				}).then(() => {
					this.downCallback()
				})
			},
			changeAddress(item, isEdit = false) {
				if (isEdit) {
					this.jumpUrl(`/pages/user/address/save/save?type=edit&addressId=${ item.id }`)
				} else {
					this.event.emit('changeAction', item)
					this.jumpBack()
				}
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let node = this.$refs['mescrollRef']
				addressAddressList({
					pageNumber: page.num,
					pageSize: page.size
				}).then(res => {
					node && node.mescroll.endSuccess(res.list.length);
					if (page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
					this.dataList = this.dataList.concat(res.list); //追加新数据
					if (!res.totalRow) {
						this.$store.commit('UPDATE_USER_SHOP_CART_ADDRESS', {})
					}
				}).catch(() => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
